<template>
  <div class="page-list-live">
    <PageList>
      <template #header>账号管理</template>
      <template #filter>
        <ListFilter :form="topFilter" :key-list="keyList" @search="handleSearch" @reset="handleReset"></ListFilter>
      </template>
      <template #tips>
        <el-button type="primary" icon="el-icon-document-add" @click="handleAdd">新增账号</el-button>
      </template>
      <template #table>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol">
          <template slot="col1" slot-scope="scope">
            <el-button icon="el-icon-edit" :loading="scope.row.loadingEdit" size="mini" type="text" @click="handleRowEdit(scope.row)">编辑</el-button>
            <!-- <el-button
              icon="el-icon-set-up"
              :loading="scope.row.loadingEdit"
              size="mini"
              type="text"
              @click="passwordHandleEdit(scope.row)"
            >
              修改密码
            </el-button>-->
            <el-button :loading="scope.row.loadingDel" size="mini" type="text" icon="el-icon-delete" style="color: red;" @click="handleRowDel(scope.row)">删除</el-button>
          </template>
        </ListTable>
      </template>
    </PageList>
    <AccountsEdit ref="RefAccountsEdit" @success="afterEditSuccess"></AccountsEdit>
    <Password ref="RefPassword" @success="afterEditSuccess"></Password>
  </div>
</template>

<script>
  import listMixin from '@/mixins/list'
  import AccountsEdit from './components/AccountsEdit.vue'
  import Password from './components/Password.vue'
  import ListFilter from '@/components/ListFilter'
  import { user } from '@/api/api'
  export default {
    components: {
      AccountsEdit,
      Password,
      ListFilter
    },
    mixins: [listMixin],
    data() {
      const _this = this
      return {
        topFilter: {
          keyword: { label: '关键字', placeholder: '请输入账号或角色' }
        },
        keyList: ['name', 'loginName'],
        tableData: [],
        tableCol: [
          { type: 'index', label: '序号', width: '60px' },
          { prop: 'name', label: '名称' },
          { prop: 'loginName', label: '登录名' },
          {
            prop: 'isAdmin', label: '角色',
            formatter(row, col, cell) {
              return cell ? '管理员' : '普通用户'
            }
          },
          {
            prop: 'createdTime', label: '创建时间',
            formatter(row, col, cell) {
              let date = new Date()
              let year = date.getFullYear()
              let month = date.getMonth() + 1
              month = month >= 10 ? month : '0' + month
              let d1 = date.getDate()
              let h = date.getHours()
              let m = date.getMinutes()
              let s = date.getSeconds()
              return year + '-' + month + '-' + d1 + ' ' + h + ':' + m + ':' + s
            }
          },
          {
            prop: 'isEnable', label: '状态',
            formatter(row, col, cell) {
              return cell ? '禁用' : '启用'
            }
          },
          { label: '操作', custom: 'col1' }
        ]
      }
    },
    methods: {
      // 请求列表数据
      async getList(query) {
        this.tableLoading = true
        try {
          let obj = query || { pageIndex: 1, pageSize: 10, orderBy: 'createdTime', orderByAscent: false }
          const { data: { items: resData, count, pageIndex } } = await user('post', obj, false)
          this.tableData = []
          this.tableData = resData.map(item => {
            item.loadingEdit = false
            item.loadingDel = false
            return item
          })
          this.$nextTick(() => {
            this.$refs['RefListTable'].update({ page: pageIndex, count })
            this.tableLoading = false
          })
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      async afterEditSuccess() {
        await this.$router.push({ query: {} })
        this.getList()
      },
      handleAdd() {
        this.$refs['RefAccountsEdit'].open()
      },
      handleRowEdit(row) {
        this.$refs['RefAccountsEdit'].open(row)
      },
      passwordHandleEdit(row) {
        this.$refs['RefPassword'].open(row)
      },
      async delRowReq(row) {
        try {
          let obj = { id: row.id, value: null }
          await user('delete', obj, true)
          row.loadingDel = false
          await this.$router.push({ query: {} })
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } catch (err) {
          row.loadingDel = false
          this.$message({
            type: 'error',
            message: '删除失败'
          })
          console.error('handleRowDel err: ', err)
        }
      },
      handleRowDel(row) {
        row.loadingDel = true
        this.$_delConfirm(
          '管理员',
          () => {
            this.delRowReq(row)
          },
          () => {
            row.loadingDel = false
          }
        )
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
